<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="java.util.*"%>
<%@ page import="com.shopcart.controller.*"%>
<%@ page import="com.shopcart.entity.*"%>

<% 
	List<Product> products = ((ItemController) session.getAttribute("itemController")).getProducts();
	request.setAttribute("products", products);
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"
	media="screen" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>

<title>BOUN SHOP</title>
</head>
<body>
	<div class="navbar navbar-inverse">
		<div class="navbar-inner">
			<a class="brand" href="home.jsp">BOUN SHOP</a>
			<ul class="nav">
				<li class="active"><a href="#">Admin Page</a></li>
				<!-- 
				<li><a href="cart.jsp">My Cart</a></li>
				<li><a href="history.jsp">My History</a></li>
				 -->
			</ul>
			<ul class="nav pull-right">
				<li><button type="button" class="btn btn-success" onclick="">Checkout</button></li>
				<li class="divider-vertical"></li>
				<li><button type="button" class="btn btn-danger"
						onclick="logout();">Log Out</button></li>
			</ul>
		</div>
	</div>

	<div class="container">
		<h2>Add product</h2>
		<form class="form-inline" method="POST" action="admin?addProduct">
			Product name: <input class="span4" type="text" name="productName" />
			Product count: <input class="span4" type="text" name="productCount" />
			<button type="submit" class="btn">Create</button>
		</form>

		<hr />
		
		<h2>Update Product Count</h2>
		<form class="form-inline" method="POST" action="admin?updateProduct">
			Product name: 
			<select name="product">
				<c:forEach var="p" items="${products}">
					<option value="${p.id}">${p.name}(${p.quantity})</option>
				</c:forEach>
			</select>
			New count: <input class="span4" type="text" name="productCount" />
			<button type="submit" class="btn">Update</button>
		</form>

		<hr />
		
		<h2>Create relation</h2>
		<form class="form-inline" method="POST" action="admin?addMatchingProducts">
			<select name="product1">
				<c:forEach var="p" items="${products}">
					<option name="${p.name}">${p.name}</option>
				</c:forEach>
			</select> is related to <select name="product2">
				<c:forEach var="p" items="${products}">
					<option name="${p.name }">${p.name}</option>
				</c:forEach>
			</select>
			<button type="submit" class="btn">Create</button>
		</form>

		<hr />

		<h2>Remove relation</h2>
		<form class="form-inline" method="POST" action="admin?removeMatchingProducts">
			Remove matching between
			<select name="product1">
				<c:forEach var="p" items="${products}">
					<option name="${p.name}">${p.name}</option>
				</c:forEach>
			</select> and <select name="product2">
				<c:forEach var="p" items="${products}">
					<option name="${p.name }">${p.name}</option>
				</c:forEach>
			</select>
			<button type="submit" class="btn">Remove</button>
		</form>

		<hr />

		<h2>Matching products</h2>
		<table class="table table-striped">
			<thead>
				<tr>
					<th>Product</th>
					<th>Matching Product(s)</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach var="p" items="${products}">
					<tr>
						<td>${p.name }</td>
						<td>
							<c:forEach var="m" items="${p.matchingProducts}">
								<c:out value="${m.name }"></c:out>
								<c:out value=", "></c:out>
							</c:forEach>
						</td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
	</div>

	<script type="text/javascript">
		function logout() {
			var form = document.createElement('form');
			form.setAttribute('method', 'post');
			form.setAttribute('action', 'logout');
			form.style.display = 'hidden';
			document.body.appendChild(form)
			form.submit();
		}
	</script>
</body>
</html>